<template>
  <el-form
    ref="form"
    :model="sizeForm"
    label-width="auto"
    :label-position="right"
    :size="size"
    class="bg-fff"
  >
    <el-form-item label="EUI">
      <el-row>
        <el-col :span="30">
          <el-input v-model="sizeForm.eui" />
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item label="设置群组">
      <el-row>
        <el-col :span="30">
          <el-select placeholder="设备群组11" v-model="sizeForm.devGroup">
            <el-option
              v-for="item in option"
              :key="item.value"
              :label="item.label"
              :placeholder="item.groupName"
              :value="item.value"
            />
          </el-select>
        </el-col>
      </el-row>
    </el-form-item>

    <el-form-item label="在线状态">
      <el-select v-model="sizeForm.online" placeholder="在线状态000">
        <el-option
          v-for="item in online"
          :key="item.id"
          :label="item.state"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="绑定时间">
      <div class="block">
        <!-- <span class="demonstration">Default</span> -->
        <div class="block">
          <!-- <span class="demonstration">With shortcuts</span> -->
          <el-date-picker
            v-model="value2"
            type="datetimerange"
            :shortcuts="shortcuts"
            range-separator="To"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            @change="changea"
            :formatter="fcTime"
            :unlink-panels="true"
          />
        </div>
      </div>
    </el-form-item>

    <el-row class="mb-4 ml-30 mt-20">
      <el-button @click="search" type="primary">搜索</el-button>
      <el-button @click="remove" type="primary">清楚条件</el-button>
      <el-button type="primary">刷新</el-button>
      <span class="ml-20">总数:{{ total }} </span>
    </el-row>
  </el-form>
</template>

<script setup>
import { ref, reactive, onMounted, inject } from "vue";
import * as api from "../../../api/index";

const { fcTime } = inject("utils");

//时间事件
const changea = (value1) => {
  console.log(value1[0]);
  value1[0].getTime;
  value1[1].getTime;
  const date = value1[0].getTime() + "-" + value1[1].getTime();
  console.log(date);
  sizeForm.date = date;
  // return date;
};
//时间

ref <
  [Date, Date] >
  [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)];
const value2 = ref("");

// const shortcuts = [
//   {
//     text: "Last week",
//     value: () => {
//       const end = new Date();
//       const start = new Date();
//       start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
//       return [start, end];
//     },
//   },
//   {
//     text: "Last month",
//     value: () => {
//       const end = new Date();
//       const start = new Date();
//       start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
//       return [start, end];
//     },
//   },
//   {
//     text: "Last 3 months",
//     value: () => {
//       const end = new Date();
//       const start = new Date();
//       start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
//       return [start, end];
//     },
//   },
// ];
const sizeForm = reactive({
  name: "",
  eui: "",
  date1: "",
  date2: "",
  devGroup: "",
  online: "",
  date: "",
});

defineProps({
  total: Number,
});
//在线状态
const online = ref([
  {
    state: "全部",
    id: "all",
  },
  {
    state: "在线",
    id: "true",
  },
  {
    state: "离线",
    id: "false",
  },
]);

//设备群组
const option = ref([]);
//设备群组下拉数据
onMounted(() => {
  shebei();
  // zaixian();
});
const shebei = () => {
  api.$groupList().then((res) => {
    console.log(res);
    option.value = res.data.map((item) => {
      return {
        value: item.id,
        label: item.groupName,
      };
    });
  });
};
//搜索
const emit = defineEmits(["search"]);
const search = () => {
  emit("search", sizeForm);
};
//清除
const remove = (aa) => {
  console.log("清除条件", aa);
};
defineExpose({
  sizeForm,
});
</script>

<style scoped>
.block:last-child {
  border-right: none;
}
.block .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>